import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useMediaQuery, Typography, GridList, GridListTile, IconButton } from '@material-ui/core';
import { Image } from 'components/atoms';
import ReactHtmlParser from 'react-html-parser';
import { Util } from 'utils/util';
import YouTube from 'react-youtube';

const useStyles = makeStyles(theme => ({
  section: {
    marginBottom: theme.spacing(2),
    [theme.breakpoints.up('md')]: {
      marginBottom: theme.spacing(4),
    },
  },
  image: {
    objectFit: 'cover',
    borderRadius: theme.spacing(1),
  },
  socialIcon: {
    borderRadius: 0,
    marginRight: theme.spacing(2),
    color: theme.palette.text.primary,
    background: theme.palette.alternate.main,
    '&:last-child': {
      marginRight: 0,
    },
  },
}));

const youtubeOpts = {
  height: '390',
  width: '640',
  playerVars: {
    // https://developers.google.com/youtube/player_parameters
    autoplay: 0,
  },
};

const MediaView = props => {
  const { data, className, ...rest } = props;
  const classes = useStyles();

  const theme = useTheme();
  const isMd = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: true,
  });

  if (data.type == 'text') {
    return (
      <div className={className} {...rest}>
        <div className={classes.section}>
          <Typography component="p" variant="h6" color="textPrimary">
            {ReactHtmlParser(data.content)}
          </Typography>
        </div>
      </div>
    )
  } else if (data.type == 'image') {
    if (data.pObjects) {
      let images = [...data.pObjects];
      images.unshift(data);
      console.log('image list', images);
      return (
        <div className={className} {...rest}>
          <GridList
            cellHeight={isMd ? 360 : 260}
            cols={2}
            spacing={isMd ? 24 : 8}
          >
            {images.map((item, index) => (
              <GridListTile key={index} cols={isMd ? item.cols : 2}>
                <Image
                  {...{src: item.image}}
                  className={classes.image}
                  lazyProps={{ width: '100%', height: '100%' }}
                />
              </GridListTile>
            ))}
          </GridList>
        </div>
      )
    } else {
      return (
        <div className={className} {...rest}>
          <Image
            {...{ src: data.thumbnail }}
            className={classes.image}
            lazyProps={{ width: '100%', height: '100%' }}
          />
        </div>
      )
    }
  } else if (data.type == 'video') {
    return (
      <div className={className} {...rest}>

      </div>
    )
  } else if (data.type == 'youtube') {
    return (
      <div className={className} {...rest}>
        <YouTube videoId={Util.YouTubeGetID(data.link)} opts={youtubeOpts} />
      </div>
    )
  }

  return (
    <div className={className} {...rest}>
    </div>
  )
}

MediaView.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  /**
   * data to be rendered
   */
  data: PropTypes.object.isRequired,
};

export default MediaView;